<template>
	<view class="home">
		<u-navbar :title="title" placeholder autoBack left-icon-color="#000">
			<template #right>
				<u-text text="返程工单" @click="$u.route(`/pages/index/returnOrder?id=${id}`)" color="#0c9bf4"
					size="32rpx"></u-text>
			</template>
		</u-navbar>
		<view class="form">
			<u-form :model="data.form" label-width="auto">
				<u-form-item label="工单名称" :borderBottom="true">
					<u-input border="none" v-model="data.form.name" input-align="right" placeholder="请输入"></u-input>
				</u-form-item>
				<u-form-item label="始发城市" :borderBottom="true">
					<u-text align="right" suffix-icon="arrow-right" :color="data.form.start_city!='请选择'?'#333':'#c0c4cc'"
						:text="data.form.start_city" @click="changeCity('start_city')"></u-text>
				</u-form-item>
				<u-form-item label="始发地" :borderBottom="true">
					<u-input border="none" v-model="data.form.start_address" input-align="right" placeholder="请输入"></u-input>
				</u-form-item>
				<u-form-item label="目的城市" :borderBottom="true">
					<u-text align="right" suffix-icon="arrow-right" :color="data.form.end_city!='请选择'?'#333':'#c0c4cc'"
						:text="data.form.end_city" @click="changeCity('end_city')"></u-text>
				</u-form-item>
				<u-form-item label="目的地" :borderBottom="true">
					<u-input border="none" placeholder="请选择" v-model="data.form.end_address" input-align="right"></u-input>
				</u-form-item>
				<u-form-item label="费用">
					<u-input border="none" placeholder="请选择" v-model="data.form.money" input-align="right"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="u-p-l-60 u-p-r-60">
			<u-button type="primary" customStyle="margin:130rpx auto 20rpx;height:100rpx;fontSize:36rpx;borderRadius:12rpx"
				@click="_addOrder">确认</u-button>
		</view>
		<region-item :regionShow="data.regionShow" @update:regionShow="data.regionShow = $event"
			@confirmRegion="confirmRegion"> </region-item>
	</view>
</template>
<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		addOrder,
		carList,
		orderInfo
	} from "../../config/api";
	const props = defineProps({
		id: {
			type: [String, Number],
			default: ''
		},
		type: {
			type: [String, Number],
			default: 1
		},
		car_id: {
			type: [String, Number],
			default: ''
		}
	})
	const title = ref("")
	if (props.id && props.type == 2) {
		title.value = '编辑返程工单'
	} else {
		title.value = '新建返程工单'
	}
	const data = ref({
		form: {
			start_city: '请选择',
			end_city: '请选择',
		},
		car: [],
		carShow: false,
		regionShow: false,
		currentKey: ''
	});
	onMounted(() => {
		if (props.id && props.type == 2) {
			_orderInfo()
		}
	})
	const _orderInfo = () => {
		orderInfo({
			order_id: props.id
		}).then(res => {
			data.value.form = res.data
			if (res.data.yingfu_money) {
				data.value.yingfu_money = JSON.parse(res.data.yingfu_money.replace(/&quot;/g, '"'))
			}
		})
	}
	const _addOrder = () => {
		addOrder({
			...data.value.form,
			[props.type == 2?'order_id':'p_id']: props.id ? props.id : '',
			car_id: props.car_id ? props.car_id : data.value.form.car_id,
		}).then(res => {
			uni.$u.toast(res.msg)
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		})
	}
	const confirmRegion = (row) => {
		data.value.form[data.value.currentKey] = row.city_text
		data.value.regionShow = false
	}
	const changeCity = (row) => {
		data.value.currentKey = row
		data.value.regionShow = true
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
		background: #fafafa;
	}

	.form {
		padding: 0 24rpx;
		background: #fff;
		margin-top: 20rpx;
	}

	::v-deep .u-form-item__body {
		padding: 30rpx 0;
	}

	::v-deep .u-radio-group--row {
		justify-content: flex-end;
	}
</style>